<template>
  <div  >
    <!--      标题-->
    <div class="title">商品库存</div>
    <div style="text-align: right;margin-top: 10px;margin-right: 10px;display: flex;padding-left: 2px;">
      <tiny-button @click="doShowRk" size="large">入库记录</tiny-button>
<!--      <tiny-button @click="doCk" size="large">仓库列表</tiny-button>-->
      <tiny-button @click="showSearch=true" size="large">筛选</tiny-button>
      <span style="margin-left: 50px;">
        <div style="height: 50px;width: 50px;">
          <import-excel @change="inportQc" title="导入期初"></import-excel>
        </div>
      </span>

    </div>
    <div style="margin-top: 10px;" >
      <j-grid :columns="cols" show-footer v-model="state.list" bind-data :offset-height="20" :show-footer="false" :offset-width="105"></j-grid>
    </div>
    <tiny-dialog-box v-model:visible="showCk"  >
      <div style="width: 300px">
        <j-button @click="addCk">新增</j-button>
        <div style="height: 15px;"></div>
        <table>
          <tbody>
          <tr v-for="(item, index) in ckList" :key="index">
            <td style="padding: 10px;">仓库名称</td>
            <td><j-input v-model="item.text" /></td>
            <td>
              <div style="margin-left: 20px;">
                <tiny-link @click="delCk(index)">删除</tiny-link>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div style="height: 50px;"></div>
      <div style="text-align: center;">
        <tiny-button @click="saveCk" size="large">保存</tiny-button>
      </div>
      <div style="height: 100px;"></div>
    </tiny-dialog-box>
    <tiny-dialog-box v-model:visible="showSearch"  >
      <div style="width: 300px">
        <x-form :rules="rulesRk" v-model="rkModel" ></x-form>
      </div>
      <div style="height: 50px;"></div>
      <div style="text-align: center;">
        <tiny-button @click="doSearch" size="large">搜索</tiny-button>
      </div>
      <div style="height: 100px;"></div>
    </tiny-dialog-box>

  </div>
</template>
<script setup>
// 送货员
import tool from "@/utils/tool";
import {onMounted, ref} from "vue";
import ImportExcel from "@/lui/importExcel.vue";
import {useRouter} from "vue-router";
const router = useRouter()
const state = ref({
  show: false,
  list: [],
})
const rkModel = ref({
  beginDate: tool.getDay('',-30),
  endDate: tool.getDay(),
  invName: '',
})
const rulesRk = ref([
  {field: 'beginDate', title: '开始日期', com: 'JPicker',width: 220  },
  {field: 'endDate', title: '结束日期', com: 'JPicker',width: 220 },
  {field: 'invName', title: '商品', com: 'JInput',width: 300},
])
const ckList = ref([])
const showCk = ref(false)
const showSearch = ref(false)
const doShowRk = () => {
  router.push({name: 'rklist'})
}
const doSearch = () => {
  getList()

}
const doCk = () => {
  tool.post('justdeliver/getCkList', {}, true).then(ret => {
    if(ret.stat) {
      ckList.value = ret.data
      showCk.value = true
    }
  })
}
const delCk = (index) => {
  if(ckList.value.length > 1) {
    tool.post('justdeliver/delCk', {id: ckList.value[index].label}).then(ret => {
      if(ret.stat) ckList.value.splice(index, 1)
    })
  }
}
const addCk = () => {
  ckList.value.push({label: '', text: ''})
}
const data = ref([])
onMounted(() => {
  getList()
})
const cols = ref([
  {type:'index', title: '', width: 70,fixed: 'left'},
  // {field: 'invName', title: '仓库', width: 100,align: 'left',headerAlign:'center'},
  {field: 'beginDate', title: '开始日期', width: 100,align: 'center',headerAlign:'center',fixed: 'left'},
  {field: 'endDate', title: '结束日期', width: 100,align: 'center',headerAlign:'center',fixed: 'left'},
  {field: 'invName', title: '商品名称', width: 200,align: 'left',headerAlign:'center',fixed: 'left'},
  {field: 'spec', title: '规格', width: 90,headerAlign: 'center'},
  {field: 'qtyUnit', title: '单位', width: 70,align: 'center'},
  {field: 'initQty', title: '期初', width: 80,align: 'right',sum: true},
  {field: 'inQty', title: '入库', width: 80,align: 'right',sum: true},
  {field: 'outQty', title: '出库', width: 80,align: 'right',sum: true},
  {field: 'leftQty', title: '结存', width: 80,align: 'right',sum: true},
])
const getList = () => {
  tool.post('justdeliver/getStockList', {formData: rkModel.value}).then(ret => {
    showSearch.value = false
    state.value.list = ret.data
  })
}
const inportQc = (url) => {
  if(url) {
    tool.post('justdeliver/goods',url).then(ret => {
      if(ret.stat) {
        getList()
      }
    })
  }
}

const saveCk = () => {
  tool.post('justdeliver/saveCk',{ckList: ckList.value}).then(ret => {
    if(ret.stat) {
      getList()
      showCk.value = false
    }
  })
}

</script>
<style scoped lang="scss">
:deep(.input-label) {
  width: 50px !important;
  height: 50px !important;
}
.title {
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  background-color: #01aaee;
  color: white;
  height: 40px;
  line-height: 40px;
}
.item {
  width: 150px;
  background: #fac20a;
  margin: 10px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  color: white;
}
</style>